<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		body {
			/*12号文字，1.5倍行高， Tahoma无衬线字体*/
            font: 12px/1.5 Tahoma;
        }
		#outer{
			width: 400px;
			margin: 0 auto;
			font-size: 14px;
		}
		#tab{
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: black;
			border: 1px solid #000;
		}
		#tab li{
			float: left;
			color: white;
			width: 80px;
			height: 30px;
			list-style: none;
			line-height: 30px;
			text-align: center;
			cursor: pointer;
		}
		#tab li.current{
			background-color: lightgray;
			color: black;
		}
		#content{
			border: 1px solid #000;
			border-top: none;
		}
		#content ul{
			margin: 0 30px;
			padding: 10px 0;
			line-height: 200%;
			display: none;
		}
		#content ul:first-child{
			display: block;
		}
	</style>
</head>
<body>
	<div id="outer">
		<ul id="tab">
			<li class="current">第一节</li>
			<li>第二节</li>
			<li>第三节</li>
		</ul>
		<div id="content">
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
			</ul>
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
				<li>这是一段新闻7,新闻的标题7</li>
				<li>这是一段新闻8,新闻的标题8</li>
				<li>这是一段新闻9,新闻的标题9</li>
				<li>这是一段新闻10,新闻的标题10</li>
			</ul>
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
				<li>这是一段新闻7,新闻的标题7</li>
				<li>这是一段新闻8,新闻的标题8</li>
			</ul>
		</div>
	</div>
<script type="text/javascript">
window.onload = function () {
	
	var lis = document.querySelector('#tab').
	querySelectorAll('li');
	
	var uls = document.querySelector('#content').
	querySelectorAll('ul');
	
	for (var i = 0; i < lis.length; i++) {
		// 记录当前li标签的索引值
		lis[i].index = i;
		lis[i].onmouseover = function () {
			// 先移除所有li标签的类名，再给鼠标经过的li标签添加类名
			for (var i = 0; i < lis.length; i++) {
				lis[i].className = '';
			}
			// 给鼠标经过的li标签添加类名
			this.className = 'current';
			
			// 先让所有的ul隐藏，再让指定索引的ul显现
			for (var i = 0; i < uls.length; i++) {
				uls[i].style.display = 'none';
			}
			uls[this.index].style.display = 'block';
		}
	}
}

</script>
	
</body>
</html>